<template>
    <div class="my-account">
      <h2>账户信息</h2>
      <div class="user-info">
        <img :src="user.avatar" class="avatar">
        <h3>{{ user.name }}</h3>
        <p>会员等级：{{ user.level }}</p>
      </div>
      <el-menu mode="horizontal">
        <el-menu-item index="/shop/orders">我的订单</el-menu-item>
        <el-menu-item index="/shop/address">收货地址</el-menu-item>
      </el-menu>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  
  const user = ref({
    avatar: 'https://example.com/avatar.jpg',
    name: '张三',
    level: '黄金会员'
  })
  </script>
  
  <style scoped>
  .my-account {
    padding: 20px;
  }
  
  .avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 15px;
  }
  </style>